<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.光源</title>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>

    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
</head>
<body>


<div id="menu" style="padding: 10px">
    <!--    <button id="menu_render">渲染</button>-->
</div>
<div id="webgl" style="border-width: 1px;border-color: blue;border-style: solid"></div>


<script>

    var scene = new THREE.Scene();  //创建场景对象Scene
    //网格渲染模式
    var geometry2 = new THREE.BoxGeometry(100, 100, 100);
    var material2 = new THREE.MeshLambertMaterial({
        color: 0xffffff, //三角面颜色
    }); //材质对象
    var mesh = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
    scene.add(mesh);

    //辅助坐标系
    var axisHelper = new THREE.AxisHelper(250);
    scene.add(axisHelper);

    //环境光
    var ambient = new THREE.AmbientLight(0x999999);
    scene.add(ambient);//环境光添加到场景中

    //点光源
    var pointLight = new THREE.PointLight(0xff0000);
    //设置点光源位置，改变光源的位置
    pointLight.position.set(200, 100, 60);
    scene.add(pointLight);
    var pointLightHelper = new THREE.PointLightHelper(pointLight,10);
    scene.add(pointLightHelper);

    //平行光
    var directionalLight = new THREE.DirectionalLight(0x00ff00,1);
    directionalLight.position.set(-80,0,-25);
    directionalLight.target = mesh;
    scene.add(directionalLight);
    var directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight,20);
    scene.add(directionalLightHelper);

    //聚光源
    var spotLight = new THREE.SpotLight(0x00ffff);
    spotLight.position.set(0,-100,0);
    spotLight.target = mesh;
    spotLight.angle = Math.PI / 3;
    scene.add(spotLight);
    var spotLightHelper = new THREE.SpotLightHelper(spotLight);
    scene.add(spotLightHelper);

    //相机设置
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;  //窗口宽高比
    var s = 200;  //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 200, 100);  //设置相机位置
    camera.lookAt(scene.position);  //设置相机方向（指向的场景对象）

    //创建渲染对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0x000000, 1);
    document.getElementById("webgl").appendChild(renderer.domElement);

    //--------鼠标操作---------
    function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

    render();
    var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
</script>


</body>
</html>